<template>
	<div class="courseware w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<zongheData ref="zongheData"></zongheData>
		<courseWareData ref="courseWareData"></courseWareData>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report" style="height: 70px;">
				<ul class="clearFix">
					<li v-for="(item,index) in ulData" :key="item" v-bind:class="[idx == index?'active':'']" @click="isActive(index)">{{item}}</li>
				</ul>
			</div>
			<div class="courseLineTwo el-tabs-report">
				课件组
				<a class="listTwo" @click="courseWareComment">课件组评论</a>
				<a class="listTwo" @click="tongjiAPI">综合统计</a>
				<a class="listTwo" @click="importDaoChu">导出数据</a>
				<div class="msearch">
					<input placeholder="请输入课件、讲师等关键词……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="60">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="name" label="课件小节"></el-table-column>
				<el-table-column prop="nickname" label="讲师" width="90"></el-table-column>
				<el-table-column prop="coursewareTypeAlias" label="属性" width="90"></el-table-column>
				<el-table-column label="课件管理" width="90">
					<template slot-scope="scope">
						<el-button @click="handleStatus(scope.row)" v-if="scope.row.coursewareType=='1-'||scope.row.coursewareType=='3-'">查看</el-button>
						<el-button @click="handleStatus(scope.row)" v-if="scope.row.coursewareType=='2-'||scope.row.coursewareType=='4-'">预览</el-button>
					</template>
				</el-table-column>
				<el-table-column label="数据管理" width="90">
					<template slot-scope="scope">
						<el-button @click="handleData(scope.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="评论" width="90">
					<template slot-scope="scope">
						<el-button @click="handleComm(scope.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="120">
					<template slot-scope="scope"> 
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<!--视频文件点击播放-->
			<div class="playerVideo" v-show="playerVideo">
				<a @click="playerClose" class="close">&#10005;</a>
				<video ref='video' controls autoplay>您的浏览器不支持 video元素。</video>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	import zongheData from '../../components/zongheData.vue';
	import courseWareData from '../../components/courseWareData.vue';
	export default {
		data() {
			return {
				courseware:'',
				liveId:'',
				updateTitle:'',
				teacherTitle:'',
				lecturerid:'',
				search: "",
				tableData: [],
				pagesize: 15,
				currentpage: 1,
				total: 1,
				multipleSelection: [],
				deleteType:'delete',
				ulData:['作业','视频','直播','文件','图文','考试','投票','提问'],
				idx: -1,
				sort:'',
//				视频文件
				playerVideo:false,
				videoSrc:'',
				filePreview:false,
				fileUrl:'',
//				课件小节学习数据
				rowId:'',
				rowName:'',
				typeName:'',
				homeworkType:'',
				coursewareType:'',
				labelType:'courseware'
			}
		},
		methods: {
			getParams() {
				this.updateTitle = this.$route.params.updateTitle;
                this.liveId = this.$route.params.liveId;
                this.pathKey = this.$route.params.pathKey;
                this.teacherTitle = this.$route.params.teacherTitle;
				this.lecturerid = this.$route.params.lecturerid;
				console.log('courseware:',this.$route.params);
			},
			//路由变化刷新缓存
			savemessage(){
                if(this.liveId!=''&&this.updateTitle!=''){
                	var s={
						liveId : this.liveId,
						updateTitle:this.updateTitle,
						pathKey:this.pathKey,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}	
					this.$store.commit('SET_COURSEWARE', s);
                	console.log("路由跳转")
                }
            },
			getTableList(){
				let that = this;
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/coursewareGroup/coursewareGroupList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{
						page:that.currentpage,
						num:that.pagesize,
						name:that.search,
						courseid:that.liveId
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				})
			},
			tongjiAPI(){
				this.$refs.zongheData.tongjiShow=true;
				this.$refs.zongheData.tongjiAPI();
			},
			isActive(index) {
				this.savemessage();
                this.idx = index;
                if(this.idx == 0){
                	this.$router.push({
						name: 'homework',
						params:{
							liveId:this.liveId,
							updateTitleCourse:this.updateTitle,
							pathKey:this.pathKey,
							teacherTitle:this.teacherTitle,
							lecturerid:this.lecturerid
						}
					})
                }else if(this.idx == 1){
                	this.$router.push({
						name: 'video',
						params:{
							liveId:this.liveId,
							updateTitleCourse:this.updateTitle,
							pathKey:this.pathKey,
							teacherTitle:this.teacherTitle,
							lecturerid:this.lecturerid
						}
					})
                }else if(this.idx == 2){
                	this.$router.push({
						name: 'newLiveColumn',
						params:{
							liveId:this.liveId,
							liveType:'courseware',
							updateTitleCourse:this.updateTitle,
							pathKey:this.pathKey,
							teacherTitle:this.teacherTitle,
							lecturerid:this.lecturerid
						}
					})
                }else if(this.idx == 3){
                	this.$router.push({
						name: 'file',
						params:{
							liveId:this.liveId,
							updateTitleCourse:this.updateTitle,
							pathKey:this.pathKey,
							teacherTitle:this.teacherTitle,
							lecturerid:this.lecturerid
						}
					})
                }
            },
            handleStatus(row){
				this.savemessage();
				if(row.coursewareType == '1-'){
					this.$router.push({
						name: 'homeworkStatus',
						params: {
							courseid:row.id,
							coursewareId: row.courseid,
							courseName:row.name,
							homeworkType:row.homeworkType,
							coursewareType:row.coursewareType,
							updateTitle:this.updateTitle,
							pathKey:this.pathKey,
							teacherTitle:this.teacherTitle,
							lecturerid:this.lecturerid
						}
					})
				}else if(row.coursewareType == '2-'){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/coursewareVideo/coursewareVideoDetails",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: {id:row.id},
						success: res => {
							if(res.data.code == 200) {
								this.playerVideo = true;
								this.$refs.video.src = res.data.data.videoPlayUrl;
							}
						}
					});
				}else if(row.coursewareType == '3-'){
					this.$router.push({
						name: 'coursewareLiveWrap',
						params: {
							liveBroadcastid:row.id,
							liveId:this.liveId,
							courseName:row.name,
							updateTitle:this.updateTitle,
							pathKey:this.pathKey,
							teacherTitle:this.teacherTitle,
							lecturerid:this.lecturerid
						}
					})
				}else if(row.coursewareType == '4-'){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/coursewareFile/coursewareFileDetails",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST', 
						data: {id:row.id},
						success: res => {
							if(res.data.code == 200) {
								let sUrl = res.data.data.coursewareFileUrl;
								if (!/.(pdf|PDF|txt)$/.test(sUrl)){
									this.fileUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + sUrl;
									console.log('非pdf:',this.fileUrl);
								}else{
									this.fileUrl = sUrl;
									console.log("url:",this.fileUrl);
								};
								window.open(this.fileUrl);
							}
						}
					});
				}
			}, 
			playerClose(){
				this.playerVideo = false;
				this.$refs.video.src = '';
			},
            handleData(row){
            	this.rowId = row.id;
            	this.rowName = row.name;
            	this.isBm = row.isBm;
            	this.typeName = row.coursewareTypeAlias;
            	this.homeworkType = row.homeworkType;
            	this.coursewareType = row.coursewareType;
				this.$refs.courseWareData.liveDataWrap = true;
				this.$refs.courseWareData.courseData();
			},
            handleComm(row){
				this.savemessage();
				this.$router.push({
					name: 'coursewareComment',
					params: {
						courseid:row.id,
						coursewareId: row.courseid,
						courseName:row.name,
						coursewareType:row.coursewareType,
						updateTitle:this.updateTitle,
						pathKey:this.pathKey,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}
				})
			},
			courseWareComment(){
				this.savemessage();
				this.$router.push({
					name: 'coursewareComment',
					params: {
						courseid:this.liveId,
						courseName:this.updateTitle,
						updateTitle:this.updateTitle,
						pathKey:this.pathKey,
						totalComment:1,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}
				})
			},
            handleEdit(row) {
				this.savemessage();
				if(row.coursewareType == '1-'){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/coursewareHomework/coursewareHomeworkDetails",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: {id:row.id},
						success: res => {
							if(res.data.code == 200) {
								this.$router.push({
									name: 'homework',
									params: {
										type: 'edit',
										liveId:this.liveId,
										pathKey:this.pathKey,
										updateTitleCourse:this.updateTitle,
										teacherTitle:this.teacherTitle,
										lecturerid:this.lecturerid
									}
								})
								this.$root.homeworkMsg = res.data.data;
							}
						}
					});
				}else if(row.coursewareType == '2-'){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/coursewareVideo/coursewareVideoDetails",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: {id:row.id},
						success: res => {
							if(res.data.code == 200) {
								this.$router.push({
									name: 'video',
									params: {
										type: 'edit',
										liveId:this.liveId,
										pathKey:this.pathKey,
										updateTitleCourse:this.updateTitle,
										updateTitle:this.teacherTitle,
										lecturerid:this.lecturerid
									}
								})
								this.$root.videoMsg = res.data.data;
							}
						}
					});
				}else if(row.coursewareType == '3-'){
					this.$ajax({
						url: this.$root.jifuUrl + "/getCourseLiveBroadcastById?" + 'id=' + row.id,
						method: 'GET',
						data: {},
						success: res => {
							if(res.data.code == 200) {
								this.$router.push({
									name: 'newLiveColumn',
									params: {
										type: 'edit',
										liveId:this.liveId,
										pathKey:this.pathKey,
										updateTitleCourse:this.updateTitle,
										teacherTitle:this.teacherTitle,
										lecturerid:this.lecturerid
									}
								})
								this.$root.columnToNewLive = res.data.data;
							}
						}
					});
				}else if(row.coursewareType == '4-'){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/coursewareFile/coursewareFileDetails",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: {id:row.id},
						success: res => {
							if(res.data.code == 200) {
								this.$router.push({
									name: 'file',
									params: {
										type: 'edit',
										liveId:this.liveId,
										pathKey:this.pathKey,
										updateTitleCourse:this.updateTitle ,
										teacherTitle:this.teacherTitle,
										lecturerid:this.lecturerid
									}
								})
								this.$root.fileMsg = res.data.data;
							}
						}
					})
				}
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			// 批量删除
			handleDeleteAll() {
				this.$rootFunction().rootDeleteAll();
			},
			deleteSubmit() {
				if(this.deleteType == 'delete'){
					let arr = [];
					arr.push(this.transitionRow.id);
					if(this.transitionRow.coursewareType == '1-'){
						this.$ajax({
							url: this.$root.jifuUrl + "/mns/coursewareHomework/deleteCoursewareHomework",
							headers:{'ContentType': 'application/json; charset=utf-8'},
							method: 'DELETE',
							data: arr,
							success: res => {
								if(res.data.code == 200) {
									this.$rootFunction().deleteResSuccess();
								}else{
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();
								}
							}
						})
					}else if(this.transitionRow.coursewareType == '2-'){
						this.$ajax({
							url: this.$root.jifuUrl + "/mns/coursewareVideo/deleteCoursewareVideo",
							headers:{'ContentType': 'application/json; charset=utf-8'},
							method: 'DELETE',
							data: arr,
							success: res => {
								if(res.data.code == 200) {
									this.$rootFunction().deleteResSuccess();
								}else{
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();
								}
							}
						})
					}else if(this.transitionRow.coursewareType == '3-'){
						this.$ajax({
		                    url: this.$root.jifuUrl + '/getLiveBroadcastChannelInfo?'+'liveBroadcastid='+this.transitionRow.id,
		                    method: 'GET',
		                    data:{},
		                    success: res => {
		                        if(res.data.code == 200) {
									let channelId = res.data.data.channelId;
									let s={id:this.transitionRow.id,channelId:channelId};
									this.$ajax({
										url: this.$root.jifuUrl + "/deleteCourseLiveBroadcast",
										method: 'POST',
										data: this.qs.stringify(s),
										success: res => {
											if(res.data.code == 200) {
												this.$rootFunction().deleteResSuccess();
											}else{
												this.failText = res.data.message;
												this.$rootFunction().deleteResFail();
											}
										}
									})
								}
							}
						});
					}else if(this.transitionRow.coursewareType == '4-'){ 
						this.$ajax({
							url: this.$root.jifuUrl + "/mns/coursewareFile/deleteCoursewareFile",
							headers:{'ContentType': 'application/json; charset=utf-8'},
							method: 'DELETE',
							data: arr,
							success: res => {
								if(res.data.code == 200) {
									this.$rootFunction().deleteResSuccess();
								}else{
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();
								}
							}
						})
					}
				}
			},
			reBack(){
				this.savemessage();
				console.log('reback:',this.pathKey);
				this.$router.push({
					name: this.pathKey,
					params: {
						updateTitle:this.teacherTitle,
						speakerId:this.lecturerid
					}
				})
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				})
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			importDaoChu(){}
		},
		components:{
			alert,
			deleteAlert,
			zongheData,
			courseWareData
		},
		mounted() {
			this.getParams();
			if(this.liveId==null){
				this.$store.commit('GET_COURSEWARE');
				var s =this.$store.state.courseware;
				this.liveId=s.liveId;
				this.updateTitle=s.updateTitle;
				this.teacherTitle = s.teacherTitle;
				this.lecturerid = s.lecturerid;
				this.pathKey = s.pathKey
			};
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					liveId : this.liveId,
					updateTitle:this.updateTitle,
					teacherTitle:this.teacherTitle,
					lecturerid:this.lecturerid,
					pathKey:this.pathKey
				};
				this.$store.commit('SET_COURSEWARE', s);
			});
            this.courseware = this.$root.huasan.courseware;
		},
		watch:{
			$route: 'getParams'
    	}
	}
</script>

<style>
	.courseware .el-tabs-report a.listTwo {margin-left:0;}
	.courseware .playerVideo{width:442px;height:300px;padding:20px 20px 30px;position: fixed;top: 50%;left: 50%;margin-top: -150px;margin-left: -221px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.courseware .playerVideo .close{color: #333;position: absolute;top: 8px;right: 10px;cursor: pointer;}
	.courseware .playerVideo video{width:442px;height:250px;object-fit: fill;margin-top: 40px;}
</style>